<template>
  <div class="echarts">
    <div
      id="echartwtlb"
      style="width: 330px; height: 450px"
    ></div>
  </div>
</template>
 
<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
// 引入饼状图组件
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
export default {
  data() {
    return {
      currentObj: [],
      arr: 0,
      ygdw:'',
      sbzt: '',
      zdbz: '',
      fzyj: '',
      qltzl: '',
      gjywc: '',
      aqsc: '',
      aqjdtx: '',
      qyaqwh: ''
    };
  },
  props: {
    // echartObj: {
    //   type: Array,
    //   default: () => [],
    // },
  },
  created() {
    // this.$nextTick(() => {
    //   this.loadEchart();
    // });
  },
  mounted() {
    // let _this = this;
    // window.onresize = function () {
    //   _this.myChart.resize();
    // };
  },
  methods: {
    loadEchart(res) {
      console.log(res)
      this.arr= 0,
      this.ygdw= 0,
      this.sbzt= 0,
      this.zdbz= 0,
      this.fzyj= 0,
      this.qltzl= 0,
      this.gjywc= 0,
      this.aqsc= 0,
      this.aqjdtx= 0,
      this.qyaqwh= 0
      this.currentObj = res;
      var Data = [];
      var Data1 = [];
      var Data2 = [];
      let arr = 0;
      
      this.currentObj
        .forEach((item) => {
           switch(item.lb){
            case '安全生产基础：员工队伍':
            // ygdw = '安全生产基础：员工队伍';
            this.ygdw = item.sl
            arr += item.sl;
            break;
              case '安全生产基础：设备状态':
            // sbzt = '安全生产基础：设备状态';
            this.sbzt = item.sl
            arr += item.sl;
            break;
              case '安全生产基础：制度标准':
            // zdbz = '安全生产基础：制度标准';
            this.zdbz = item.sl
            arr += item.sl;
            break;
              case '安全生产基础：防灾应急':
            // fzyj = '安全生产基础：防灾应急';
            this.fzyj = item.sl
            arr += item.sl;
            break;
              case '工作机制：全链条质量安全管控机制':
            // qltzl = '工作机制：全链条质量安全管控机制';
            this.qltzl = item.sl
            arr += item.sl;
            break;
              case '工作机制：关键业务处理和常规作业工作机制':
            // gjywc = '工作机制：关键业务处理和常规作业工作机制';
            this.gjywc = item.sl
            arr += item.sl;
            break;
              case '监督评价体系：安全生产风险管理体系':
            // aqsc = '监督评价体系：安全生产风险管理体系';
            this.aqsc = item.sl
            arr += item.sl;
            break;
              case '监督评价体系：安全监督体系':
            // aqjdtx = '监督评价体系：安全监督体系';
            this.aqjdtx = item.sl
            arr += item.sl;
            break;
              case '安全文化：企业安全文化':
            // qyaqwh = '安全文化：企业安全文化';
            this.qyaqwh = item.sl
            arr += item.sl;
            break;
          }
          Data.push(item.lb);
          Data1.push(item.sl);
          Data2.push(item.num);
        });
      this.myChart = echarts.init(document.getElementById("echartwtlb"));
      this.myChart.setOption({
        title: {
          left: "center",
          text: "本质安全",
          textStyle: {
            color: "white", //字体颜色
          },
          fontSize: 14,
        },
        tooltip: {  
          //鼠标经过tooltip显示正数，params.marker为默认的小圆点
          formatter(params) {
            return params.name + "<br/>" + params.marker + params.seriesName + "&nbsp;&nbsp;<b>" + (params.data) + "</b>"
          },
        },
        // legend: {
        //   left:50,
        //   //data: data,
        //   textStyle: {
        //     fontSize: 13, //字体大小
        //     color: "white", //字体颜色
        //   },
        // },
        grid: {
          top: 50,
          left: "10%",
          right: "1%",
          bottom: "1%",
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          inverse:true,
          boundaryGap: [0, 0.01],
          //x轴坐标数字显示正数
          axisLabel: 
            {textStyle: {
              color: "white",
            },
            formatter(params) {
              return params;
            }
          },
          //设置轴线的属性
          axisLine:{
              lineStyle:{
                  color:'white',
                  width:2,//这里是为了突出显示加上的
              }
          } 
        },
        yAxis: {
          type: "category",
          position:'right',
          data: ['员工队伍','设备状态','制度标准','防灾应急','质量管控','作业机制','安风体系','监督体系','安全文化'],
          axisLabel: {
            show: true,
            textStyle: {
              color: "white",
              fontSize: 12,
            },
          },
           //设置轴线的属性
          axisLine:{
              lineStyle:{
                  color:'white',
                  width:2,//这里是为了突出显示加上的
              }
          } ,
          minInterval:1,
            min: 0
        },
        series: [
          {
            name: "数量",
            type: "bar",
            data: [this.ygdw,this.sbzt, this.zdbz, this.fzyj, this.qltzl, this.gjywc, this.aqsc, this.aqjdtx ,this.qyaqwh  ],
            // data: [-this.ygdw == -0 ? 0 : -this.ygdw,-this.sbzt == -0 ? 0 : -this.sbzt, -this.zdbz == -0 ? 0 : -this.zdbz,-this.fzyj == -0 ? 0 :  -this.fzyj,-this.qltzl == -0 ? 0 :  -this.qltzl, -this.gjywc == -0 ? 0 : -this.gjywc, -this.aqsc == -0 ? 0 : -this.aqsc, -this.aqjdtx == -0 ? 0 : -this.aqjdtx ,-this.qyaqwh == -0 ? 0 : -this.qyaqwh  ],
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorlist = ["#DA251D", "#E67716", "#FBC300", "#0c7ef2","#DA251D", "#E67716", "#FBC300", "#0c7ef2", "#E67716"];
                  return colorlist[params.dataIndex];
                },
              },
            },
            label: {
              normal: {
                show: true, //开启显示
                  position: "left", //显示方向
                  textStyle: {
                    fontWeight: 300,
                    color:"white",
                    fontSize: 14, //文字的字体大小
                },
                formatter: function (v) {
                  //console.log(v)
                  var val = v.data;
                  //return val + '\n'+ val/arr * 100 +'%';
                  return (
                    val + "\n" + (Math.round((val / arr) * 10000) / 100.0 + "%") // 小数点后两位百分比
                  );
                },
                color: function (params) {
                  var colorlist = ["#DA251D", "#E67716", "#FBC300", "#0c7ef2"];
                  return colorlist[params.dataIndex];
                },
              },
            },
          },
        ],
      });
    },
  },
};
</script>
 
<style lang='less' scoped>
</style>